<template>
    <div>
        <el-container class="top-container">
            <el-container class="left-container">
                <el-card class="box-card">
                    <div class="card-body">
                        <el-image class="user-header-image"
                                  fit="cover"
                                  :src="headPic"></el-image>
                        <div class="user-info-box">
                            <div class="user-info-cell">
                                <span class="title">微信昵称</span>
                                <span class="content">{{wechatNick}}</span>
                            </div>
                            <div class="user-info-cell">
                                <span class="title">姓名</span>
                                <el-input :disabled="param.disabled"
                                          v-model="param.name"></el-input>
                            </div>
                            <div class="user-info-cell">
                                <span class="title">手机号</span>
                                <el-input :disabled="param.disabled"
                                          v-model="param.phone"></el-input>
                            </div>
                            <div class="user-info-cell">
                                <span class="title">代理等级</span>
                                <el-select v-model.number="param.delegeteLevel"
                                           placeholder
                                           :disabled="param.disabled">
                                    <el-option v-for="item in levelList"
                                               :key="item.id"
                                               :label="item.name"
                                               :value="item.id"></el-option>
                                </el-select>
                            </div>
                            <div class="user-info-cell">
                                <span class="title">成员数量</span>
                                <span class="content">{{agentNum}}</span>
                            </div>
                            <div class="user-info-cell">
                                <span class="title">售出商品数量</span>
                                <span class="content">{{productNum}}</span>
                            </div>
                        </div>
                        <div class="edit-button">
                            <el-button @click="handleClick()"
                                       size="small"
                                       type="primary">{{param.disabled ? '修改': '确定'}}</el-button>
                        </div>
                    </div>
                </el-card>
            </el-container>
            <el-container class="right-container">
                <el-card class="box-card">
                    <div class="card-body">
                        <div class="user-info-box">
                            <div class="user-info-cell">
                                <span class="title">总订单数量</span>
                                <span class="content">{{orderNum}}</span>
                            </div>
                            <div class="user-info-cell">
                                <span class="title">代理钻石结余</span>
                                <span class="content">{{scort}}</span>
                                <el-button @click="setBuyIntegral"
                                           type="primary"
                                           size="small">钻石充值</el-button>
                            </div>
                            <div class="user-info-cell">
                                <span class="title">代理等级升级</span>
                                <span class="content">{{quantityRequired}}</span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-container>
        </el-container>
        <el-tabs value="first">
            <el-tab-pane label="订单列表"
                         name="first"></el-tab-pane>
            <div class="table-body">
                <el-table :data="tableData"
                          border
                          style="width: 100%">
                    <el-table-column prop="orderNum"
                                     label="订单编号"></el-table-column>
                    <!-- <el-table-column prop="prop"
                                     label="购买用户">
          </el-table-column>-->
                    <el-table-column prop="title"
                                     label="购买商品"></el-table-column>
                    <el-table-column prop="totalPay"
                                     label="金额"></el-table-column>
                    <el-table-column prop="damondNum"
                                     label="钻石变更"></el-table-column>
                    <el-table-column prop="status"
                                     :formatter="statusFormat"
                                     label="订单状态"></el-table-column>
                </el-table>
            </div>
        </el-tabs>

        <el-dialog title="钻石充值"
                   :visible.sync="isBuyIntegral"
                   width="30%">
            <buy-integral ref="buyRef"
                          @submit="isBuyIntegral = $event;initData()" />
        </el-dialog>
    </div>
</template>

<script>
import BuyIntegral from "./BuyIntegral";
export default {
    data() {
        return {
            customerId: "",
            wechatNick: "",
            headPic: "",
            agentNum: 0,
            productNum: 0,
            orderNum: 0,
            scort: 0,
            quantityRequired: 0,
            param: {
                agentId: "", //代理id
                name: "", //姓名
                phone: "", //电话
                levelName: "", //代理等级
                status: "", //删除状态
                disabled: true, //编辑状态
                delegeteLevel: ""
            },
            tableData: [],
            isBuyIntegral: false, //钻石充值 显示dialog
            levelList: [] // 代理级别集合
        };
    },
    mounted() {
        this.customerId = this.$route.params.customerId;
        this.initData();
        this.getOrderList();
        this.initDelegeteOptions();
    },
    methods: {
        initData() {
            let customerId = this.$route.params.customerId;
            this.$service.getAgentDetail(customerId).then(res => {
                this.wechatNick = res.data.wechatNick ? res.data.wechatNick : "";
                this.headPic = res.data.headPic || "";
                this.agentNum = res.data.agentNum ? res.data.agentNum : "0";
                this.productNum = res.data.productNum ? res.data.productNum : "0";
                this.orderNum = res.data.orderNum ? res.data.orderNum : "0";
                this.param.agentId = res.data.agentId;
                this.param.name = res.data.name ? res.data.name : "";
                this.param.phone = res.data.phone ? res.data.phone : "";
                this.param.delegeteLevel = res.data.levelId
                    ? Number(res.data.levelId)
                    : "";
                this.scort = res.data.scort ? res.data.scort : "";
                this.quantityRequired = (res.data.productNum || '-') + '/' + (res.data.quantityRequired || '-')
                    
            });
        },
        getOrderList() {
            let param = {
                tbOrder: {
                    customerId: this.customerId
                },
                queryRequest: {
                    pageSize: 100,
                    pageNum: 1
                }
            };
            this.$service.getOrderList(param).then(res => {
                console.log(res.data);
                for (let i = 0; i < res.data.rows.length; i++) {
                    const element = res.data.rows[i];
                    element.damondmoney = element.damondNum / 50;
                    element.totalPay = element.totalPay / 100;
                }
                this.tableData = res.data.rows || [];
            });
        },
        statusFormat(row) {
            let status = row.status && Number(row.status);
            let statusText = "-";

            switch (status) {
                case 1:
                    statusText = "未付款";
                    break;
                case 2:
                    statusText = "已付款";
                    break;
                case 3:
                    statusText = "已发货";
                    break;
                case 4:
                    statusText = "交易成功";
                    break;
                case 5:
                    statusText = "交易关闭";
                    break;
                case 7:
                    statusText = "退货中";
                    break;
                case 8:
                    statusText = "退货中";
                    break;
                case 9:
                    statusText = "退货中";
                    break;
            }
            return statusText;
        },
        initDelegeteOptions() {
            this.$service.getAgentLevel().then(res => {
                this.levelList = res.data || [];
            });
        },
        setBuyIntegral(scort) {
            this.isBuyIntegral = true;

            this.$nextTick(() => {
                this.$refs.buyRef.initData(
                    this.wechatNick,
                    this.param.phone,
                    this.$route.params.customerId
                );
            });
        },
        handleClick() {
            if (!this.param.disabled) {
                let param = {
                    id: this.param.agentId,
                    name: this.param.name,
                    phone: this.param.phone,
                    levelId: this.param.delegeteLevel
                };
                this.$service.agentUpdate(param).then(res => {
                    this.$message({
                        message: "修改成功",
                        type: "success"
                    });
                    this.initData();
                });
            } else {
            }
            this.param.disabled = !this.param.disabled;
        }
    },
    components: {
        "buy-integral": BuyIntegral
    }
};
</script>

<style lang="scss" scoped>
.box-card {
    width: 95%;
    height: 320px;
    position: relative;
    .card-body {
        width: 100%;
        display: flex;
        .user-header-image {
            margin-right: 50px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        .user-info-box {
            width: 50%;
            display: flex;
            flex-direction: column;
            .user-info-cell {
                height: 30px;
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                .title {
                    white-space: nowrap;
                    min-width: 120px;
                }
                .content {
                    flex: 1;
                }
            }
        }
    }
}

.edit-button {
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>